<script>
    if(!location.hash.replace('#', '').length) {
        location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
        location.reload();
    }
</script>

<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>

<button id="openNewSessionButton">Open New Room</button>
<button id="changeBandwidth" disabled>changeBandwidth</button>
<br />
<script>
var connection = new RTCMultiConnection();

// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
    var channel = config.channel || connection.channel || 'default-namespace';
    var sender = Math.round(Math.random() * 9999999999) + 9999999999;

    io.connect(SIGNALING_SERVER).emit('new-channel', {
        channel: channel,
        sender: sender
    });

    var socket = io.connect(SIGNALING_SERVER + channel);
    socket.channel = channel;

    socket.on('connect', function() {
        if (config.callback) config.callback(socket);
    });

    socket.send = function(message) {
        socket.emit('message', {
            sender: sender,
            data: message
        });
    };

    socket.on('message', config.onmessage);
};

// easiest way to customize what you need!
connection.session = {
    audio: true,
    video: true
};

// using low-bandwidth
connection.bandwidth = {
    audio: 20,
    video: 30
};

connection.media.max(1920, 1080);

// on getting local or remote media stream
connection.onstream = function(e) {
    document.body.appendChild(e.mediaElement);

    if (e.type == 'remote') {
        document.querySelector('#changeBandwidth').disabled = false;
    }
};

// setup signaling channel
connection.connect();

// open new session
document.querySelector('#openNewSessionButton').onclick = function() {
    this.disabled = true;
    connection.open();
};

// changing bandwidth at runtime
document.querySelector('#changeBandwidth').onclick = function() {
    this.disabled = true;

    function changeBandwidthFromAllPeers(bandwidth) {
        for (var peer in connection.peers) {
            connection.peers[peer].changeBandwidth(bandwidth);
        }
    }

    changeBandwidthFromAllPeers({
        audio: 50,
        video: 256
    });
};
</script>
<style>
video {
    width: 35%;
}
</style>